<template>
  <div class="image-container">  
    <button @click="startCamera">开启摄像头</button><button @click="closeCamera">关闭摄像头</button>
    <img :src="imageSrc" />  
    <div class="text-overlay">{{message}}</div>  
</div>  
</template>
 
<script>
export default {
  data() {
    return {
      imageSrc: '',
      message: '',
      ws: null,
    };
  },
  mounted() {
    this.connectWebSocket();
  },
  methods: {
    startCamera() {
      this.ws.send("startCamera")
    },
    closeCamera() {
      this.ws.send("closeCamera")
    },
    connectWebSocket() {
      const ws = new WebSocket('ws://192.168.100.100:6002?cameraId=1&force=1');
      this.ws = ws;
      ws.onopen = () => console.log('WebSocket connected');
      ws.onmessage = (message) => {
        let jsonData = JSON.parse(message.data);
        for (var key in jsonData) {
          console.log(key)
        }
        if (jsonData['image-data']) {
          this.imageSrc = 'data:image/png;base64,' + jsonData['image-data'];
        } else {
          this.message = message.data;
        }
          
      };
 
      ws.onerror = (error) => console.error(error);
    },
    showImage(blob) {
      // 创建一个Blob URL
      this.imageSrc = URL.createObjectURL(blob);
    }
  }
};
</script>
<style>  
  .image-container {  
      position: relative;  
      display: inline-block;  
  }  
  .image-container img {  
      width: 100%;  
      height: auto;  
      display: block;  
  }  
  .text-overlay {  
      position: absolute;  
      top: 50%; /* 调整这个值以定位文字 */  
      left: 50%; /* 调整这个值以定位文字 */  
      transform: translate(-50%, -50%); /* 居中文字 */  
      color: white; /* 根据需要更改文字颜色 */  
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加文字阴影 */  
      font-size: 24px; /* 调整字体大小 */  
  }  
</style>  